<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(600)" resize show-footer show-maximize :width="layout.modalWidth(600)" :height="layout.modalHeight()" @close="cancelClick">
        <div class="content" v-loading="isSubmitting">
            <el-form-item :style="layout.col1" label="所属组织" prop="classId">
                <el-tree-select v-model="state.model.orgId" :check-strictly="true" :data="state.tree" :props="{label: 'orgAllName', children: 'children'}" :render-after-expand="false" style="width: 100%;" value-key="id" @change="onOrgChange"/>
                <el-text type="warning">只能选择科室</el-text>
            </el-form-item>
            <div style="padding-top: 20px" @click="onChooseFile">
                <div class="import">
                    <b-icon name="bi-upload" size="30"/>
                    <span>立即导入</span>
                </div>
            </div>
            <div class="message">
                <span>只能导入 .xls .xlsx 格式文件，请下载模板，按照模板格式填写后进行导入  <el-button type="primary" link @click="downloadTemplate"><b-icon name="bi-arrow-down-short" size="20"/> 下载模板</el-button></span>
            </div>
        </div>
        <template #footer>
            <el-button type="primary" @click="cancelClick">确定</el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;



const Model = () => {
    return {
        orgId: null,
        bureauId: null,
        areaCode: null,
    }
}

// 组织切换
function onOrgChange(id, b) {
    console.log(b)
    const orgId = id;
    const org = state.tree.treeFind(item => item.id === id);

    // 单位 id 就是组织的 pid
    const pid = org.pid;
    const parent = state.tree.treeFind(item => item.id === pid);
    // 区划编号就是上级组织的区划编号
    let areaCode;
    if (parent) {
        areaCode = parent.areaCode;
    }
    state.model.bureauId = pid;
    state.model.areaCode = areaCode;
}

function downloadTemplate() {
    // 模板下载地址
    const templateDownload = `${window.$config.baseUrl}/Template/SysUserTemplate.xlsx`
    window.open(templateDownload)
}

function onChooseFile() {
    $chooseFile({
        count: 1,
        extension: [".xls", ".xlsx"],
        success: (files) => {
            const formData = new FormData()
            formData.append("FileList", files[0]);
            const params = {
                ...state.model
            }
            if (!params.orgId) return $message.warning("请选择组织")
            isSubmitting.value = true
            api.ImportUserList(params, formData).then(({success, data}) => {
                isSubmitting.value = false;
                if (!success) return;
                $message.success("导入成功")
                submitSuccess()
            })
        }
    })
}


// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    // 查询分类树
    api.GetOrgTreeList().then(({success, data}) => {
        if (success) {
            state.tree = data;
            state.tree.treeMap(item => {
                item.disabled = item.orgType === 1;
                return item;
            });
        }
    });
}


onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
.import {
    //width: 400px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 6px;
    border: 1px dashed var(--el-color-primary);
    cursor: pointer;
    color: var(--el-color-primary);
    background-color: rgba(0, 0, 0, 0.06);
    overflow: hidden;
    font-weight: bold;
    &:active {
        opacity: 0.8;
    }
}
.message {
    padding: 10px;
    border: 1px solid var(--el-color-danger);
    background-color: var(--el-color-danger-light-9);
    margin-top: 40px;
    border-radius: 6px;
    color: var(--el-color-danger);
}
</style>
